<template>
	<view class="tab-container">
		<view class="tab" :class="tabIndex === 0 ? 'tab-checked' : ''" @tap="togTab(0)">全部</view>
		<view class="tab" :class="tabIndex === 1 ? 'tab-checked' : ''" @tap="togTab(1)">二级分类名称</view>
		<view class="tab" :class="tabIndex === 2 ? 'tab-checked' : ''" @tap="togTab(2)">二级分类名称</view>
		<view class="tab" :class="tabIndex === 3 ? 'tab-checked' : ''" @tap="togTab(3)">二级分类名称</view>
	</view>
</template>

<script>
export default {
	data () {
		return {
			tabIndex: 0
		}
	},
	methods: {
		togTab (index) {
			this.tabIndex = index;
		}
	}
}
</script>

<style lang="less">
.tab-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80rpx;
	padding: 0 50rpx;
	background:rgba(90,194,255,1);
	.tab {
		font-size:26rpx;
		font-weight:400;
		color:rgba(255,255,255,1);
	}
	.tab-checked {
		position: relative;
		font-size:28rpx;
		font-weight:500;
		color:rgba(255,255,255,1);
		&::after {
			content: "";
			position: absolute;
			bottom: -14rpx;;
			left: 50%;
			transform: translateX(-50%);
			width:80rpx;
			height:6rpx;
			background:rgba(255,255,255,1);
			border-radius:4rpx;
		}
	}
}
</style>
